<template id="app">
  <el-row :gutter="20">
    <el-col :span="6">
      <el-card class="box-card" style=" height: 230px; width: 100%">
        <div slot="header" class="clearfix" style="height: 160px;border-bottom: 1px solid #dcdcdc">
          <div style="margin: 30px 0px 0px  40px">
            <h2>待验收项目<span> &nbsp;&nbsp;{{proCountDate.acceptanceAgent}}</span></h2>
          </div>
          <div style="margin: 23px 0px 0px  40px">
            <h3>施工中项目<span>&nbsp;&nbsp;{{proCountDate.underConstruction}}</span></h3>
          </div>
        </div>
        <div class="text item">
          <div style="margin: 0px 0px 0px  40px">
            <h3>已验收项目<span>&nbsp;&nbsp;{{proCountDate.haveBeenAccepted}}</span></h3>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="box-card" style=" height: 230px;width: 100%">
        <div slot="header" class="clearfix" style="height: 160px;border-bottom: 1px solid #dcdcdc">
          <div style="margin: 30px 0px 0px  40px">
             <h2>今日新增用户数&nbsp;&nbsp; <span>{{userCountDate.newToday}}</span></h2>
          </div>
          <div style="margin: 23px 0px 0px  40px">
            <h3>昨日新增用户数&nbsp;&nbsp;<span>{{userCountDate.addedYesterday}}</span></h3>
          </div>
        </div>
        <div class="text item">
          <div style="margin: 0px 0px 0px  40px">
            <h3>总用户数 &nbsp;&nbsp;<span>{{userCountDate.userAll}}</span></h3>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6"></el-col>
    <el-col :span="6"></el-col>
  </el-row>
</template>
<script setup lang="ts">
import {ref, reactive, onMounted} from 'vue';
import baseService from "@/service/baseService";
import {ElMessage} from "element-plus";
//开始加载数据
onMounted(()=>{
  getUserCount();
})
const userCountDate = reactive({})

const proCountDate = reactive({})

const getUserCount = ()=>{
  baseService.put("/sysapp/user/userCount").then((res) => {
     Object.assign(userCountDate,res.data)
  });
  baseService.put("/sysproject/project/listProCount").then((res) => {
    Object.assign(proCountDate,res.data)
  });
};
</script>
<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.box-card{

}


</style>
